<!--
 TODO
 * Option to go directly to results
 * Progress Dialog 
 * Table column resizing/controls
-->
<html>
<head>
	<link rel="stylesheet" href="css/blueprint/screen.css" type="text/css" media="screen, projection">
	<link rel="stylesheet" href="css/blueprint/print.css" type="text/css" media="print">
	<!-[if IE]><link rel="stylesheet" href="css/blueprint/lib/ie.css" type="text/css" media="screen, projection"><![endif]->
	<link rel="stylesheet" media="all" type="text/css" href="css/impromptu.css"/>
	<link rel="stylesheet" media="all" type="text/css" href="css/ui.tabs.css"/>
	<link rel="stylesheet" media="all" type="text/css" href="css/spared.css"/>


 	<script type="text/javascript" src="lib/jquery-1.2.6.js"></script>
 	<script type="text/javascript" src="lib/jquery.ui.all.js"></script>
 	<script type="text/javascript" src="lib/jquery-impromptu.1.5.js"></script>
 	<script type="text/javascript" src="js/spared-config.js"></script>
 	<script type="text/javascript" src="js/spared.js"></script>
</head>
<body>
    <div class="container">
        <div class="column span-24">
        	<h1>SPARED -- The SPARQL Editor
        </div>

        <div class="column span-16">
			<h2>Query Editor</h2>
			<form class="spared" action="http://api.talis.com/stores/ldodds-dev1/services/sparql">

				<div class="buttons">
					<button class="positive" id="run-query">
						<img src="icons/script_go.png" />Run</button>
					<button id="load-query">
						<img src="icons/script_edit.png" />Load</button>
					<button class="negative" id="clear-query">
						<img src="icons/script_delete.png" />Clear</button>
				</div>

				<div style="clear: left;"></div>

				<textarea class="code span-16" id="query" name="query" rows="10" cols="60">
PREFIX rdfs: <http://www.w3.org/2000/01/rdf-schema#>
SELECT ?label WHERE {
  ?s rdfs:label ?label.
}
				</textarea>

				<div class="options">
					<input type="checkbox" id="inline" checked="checked" value="true">Show results in-line</input>
				</div>
				
			</form>

        </div>

        <div id="nav" class="column span-8 last">
          <div class="box">
          	<h3>Prefixes</h3> 
          	<div class="contents">
          	<span class="small">Click to add prefix to query</span>
          	<div class="list-of-items" id="prefixes">
          	Empty
          	</div>
          	</div>
          </div>

          <div class="box">
          	<h3>Templates</h3>
          	<div class="contents">
          	<span class="small">Click to create new query from template</span>
          	<div class="list-of-items" id="templates">
          	Empty
          	</div>
          	</div>
          </div>

          <div class="box">
          	<h3>Examples</h3>
          	<div class="contents">
          	<span class="small">Click to load example query</span>
          	<div class="list-of-items" id="examples">
          	Empty
          	</div>
          	</div>
          </div>

        </div>

		<div id="results" class="column span-24 last">
			<h2>Results</h2>
		</div>

        <div id="footer" class="column span-24 box">Created by <a href="http://www.ldodds.com">Leigh Dodds</a></div>
    </div>


</body>
</html>